<template>
    <transition-group
        name="staggered-fade"
        v-bind:css="false"
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
    >
        <slot></slot>
    </transition-group>
</template>

<script>
module.exports = {
    props: {
        height: 'String'
    },
    methods: {
        beforeEnter (el) {
            el.style.opacity = 0
            el.style.height = 0
        },
        enter (el, done) {
            var delay = el.dataset.index * 150
            setTimeout(() => {
                Velocity(
                    el,
                    { opacity: 1, height: this.height || '2.2rem' },
                    { complete: done }
                )
            }, delay)
        },
        leave (el, done) {
            var delay = el.dataset.index * 150
            setTimeout(() => {
                Velocity(
                    el,
                    { opacity: 0, height: 0 },
                    { complete: done }
                )
            }, delay)
        }
    }
}
</script>
